<template>
    <div class="ty">
        这里是学习typescript
    </div>
</template>
<script lang="ts" setup>
// 1.类型声明和类型推断
let x: number = 1;

// 2.接口定义 ?-> 可选属性
interface Person {
    name: string;
    age: number;
    hobby?: string[];
}

//  接口继承
interface Student extends Person {
    id: number;
}

let p: Student = {
    id: 1,
    name: '张三',
    hobby: ['football', 'basketball'],
    age: 18
}

// 别名
type data = { name: string, age: number }

let p1: data = {
    name: '张三',
    age: 18
}

// 3.泛型
function getData<T>(value: T): T {
    return value;
}

let result = getData < string > ('hello world');
console.log(result);

// 4.枚举
// 普通枚举
enum UserRole {
    admin = 1,
    student = admin / 2,
    teacher = "teacher".length
}

console.log(UserRole.student); // 0.5

// 常量枚举（只能包含常量）const
const enum HttpStatus {
    OK = 200,
    NotFound = 404,
    // Error = "404".length // ❌ 错误！常量枚举不能含计算值
}

console.log(HttpStatus.OK);  // 编译后变为 console.log(200)

// 普通枚举允许表达式计算

enum Example {
    A = 1 + 1,        // ✅ 允许
    B = Math.random()  // ✅ 允许（运行时计算）
}

// 5.如何处理可空类型（nullable types）和undefined类型，如何正确处理这些类型以避免潜在错误
let numberOrNull: number | null = 10;
numberOrNull = null; // 可以赋值为null 

let stringOrUndefined: string | undefined = "Hello";
stringOrUndefined = undefined; // 可以赋值为undefined

// 6.什么是联合类型和交叉类型
// 联合类型
let myVar: string | number;
myVar = "Hello"; // 合法
myVar = 123; // 合法

// 交叉类型
interface A {
    a(): void;
}
interface B {
    b(): void;
}
type C = A & B; // 表示同时具备 A 和 B 的特性
const c: C = {
    a() { },
    b() { }
};

console.log(c.a());

</script>